import React, { FC, useState, useEffect } from 'react'
import QuestionCard from './components/QuestionCard'
import { produce } from 'immer'

const List2: FC = () => {
    // useEffect 用于监听创建时的写法
    /* 
        React 18 开始，useEffect 在开发环境下会执行两次; 
        模拟组件创建、销毁、再创建的完整流程，及早暴露问题;
        开发环境只会执行一次 */
    useEffect(() => {
        console.log('组件创建渲染之后执行')
        return () => {
            console.log('销毁')
        }
    }, [])
    const [questionList, setQuestionList] = useState([
        { id: 'q1', title: '问卷1', isPublished: false },
        { id: 'q2', title: '问卷2', isPublished: false },
        { id: 'q3', title: '问卷3', isPublished: true },
        { id: 'q4', title: '问卷4', isPublished: false },
    ])
    function addQuestion() {
        const r = Math.random().toString().slice(-3)
        // setQuestionList([
        //     ...questionList,
        //     {
        //         id: 'q' + r,
        //         title: '问卷' + r,
        //         isPublished: true,
        //     },
        // ])
        // 使用immer
        setQuestionList(
            produce((draft: any) => {
                draft.push({
                    id: 'q' + r,
                    title: '问卷' + r,
                    isPublished: true,
                })
            })
        )
    }

    // useEffect 用于监听更新时的写法
    // useEffect(() => {
    //     console.log(
    //         '等价于生命周期中的update。[]中放置依赖的数据，依赖数据发生变化时，触发useEffect执行'
    //     )
    // }, [questionList])
    // // useEffect 用于监听销毁时的写法
    // useEffect(() => {
    //     console.log('等价于生命周期中的mounted会执行的函数内容')
    //     return () => {
    //         console.log('等价于生命周期中的Unmounted会执行的函数内容') // 销毁
    //     }
    // }, [])
    function deleteQuestion(id: string) {
        // 修改用filter，返回新的数组
        // setQuestionList(
        //     questionList.filter(q => {
        //         if (q.id == id) return false
        //         else return true
        //     })
        // )
        // 使用immer
        setQuestionList(
            produce(draft => {
                const index = draft.findIndex(q => q.id == id)
                draft.splice(index, 1)
            })
        )
    }
    function publishQuestion(id: string) {
        // 修改用map，返回新的数组
        // setQuestionList(
        //     questionList.map(q => {
        //         if (q.id !== id) return q
        //         return {
        //             ...q,
        //             isPublished: true,
        //         }
        //     })
        // )
        // immer
        setQuestionList(
            produce((draft: any) => {
                const q = draft.find((item: any) => item.id == id)
                if (q) {
                    q.isPublished = true
                }
            })
        )
    }

    return (
        <div>
            <h1>问卷列表页2</h1>
            <div>
                {questionList.map(question => {
                    const { id, title, isPublished } = question
                    return (
                        <QuestionCard
                            key={id}
                            id={id}
                            title={title}
                            isPublished={isPublished}
                            publishQuestion={publishQuestion}
                            deleteQuestion={deleteQuestion}
                        />
                    )
                })}
            </div>
            <button onClick={addQuestion}>新增问卷</button>
        </div>
    )
}
export default List2
